// 领导首页
<template>
  <div class="box">
    <H2 style="text-align: center">2025XXX行动</H2>
    <el-button type="primary" @click="">保存</el-button>
    <el-button type="primary" @click="">上报</el-button>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="督办编号:">{{ form.code }} </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="级别:">{{ form.level }} </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="来源:">{{ form.source }} </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="创建人:">{{ form.created }} </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="分类:">{{ form.class }} </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="任务标题:">{{ form.name }} </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="具体任务:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="form.content1"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="工作举措:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="form.content2"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="完成标准:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="form.content3"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="备注:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="form.content4"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h3>
        <span>任务描述</span>
      </h3>
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="name" label="任务描述" />
        <el-table-column prop="date" align="center" label="完成时间" width="180" />
      </el-table>
      <h3>
        <span>任务情况</span>
      </h3>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="完成进度:">
            <el-input v-model="form.point">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="是否完结:">
            <el-radio-group v-model="form.isend">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="最新进展:">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          placeholder="请输入内容"
          v-model="form.content5"
        >
        </el-input>
      </el-form-item>
      <el-upload
        class="upload-demo"
        action="/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">附件上传</el-button>
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
    </el-form>
    <h3>历史记录</h3>
    <el-table :data="historyData" border stripe style="width: 100%">
      <el-table-column prop="date" align="center" label="创建时间" width="180" />
      <el-table-column prop="point" label="完成进度" />
      <el-table-column prop="isend" label="是否完结" />
      <el-table-column prop="content5" label="最新进展">
        <template slot-scope="scope">
          <div v-html="scope.row.content4"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        code: '2025-DB-001',
        level: '集团级',
        source: '其他',
        created: '其他',
        class: '定方向',
        point: 20,
        isend: 0,
        name: '1.深入谋划“十五五”发展规划',
        content1: `深入子公司走访调研，进一步把握相关业务的产业政策、市场形势、发展趋势，并结合上级部署要求和集团功能定位、主责主业和拟培育方向，提出集团“十五五”时期战略定位、主攻方向、发展目标、主要路径等，编制集团公司“十五五”规划指引`,
        content2: `1.指导各子公司开展“十五五”规划前期分析，通过开展行业内外走访调研等方式，切实把握好各业务产业政策、市场形势、发展趋势。
2.组织各子公司开展“十五五”规划思路研究，结合产业发展形势分析情况，提出本企业“十五五”时期战略思路、发展目标等。
3.根据国资委“十五五”规划编制有关安排和集团公司战略发展相关部署，结合各子公司“十五五”规划编制思路，综合分析、深入论证，初步明确集团“十五五”时期战略定位、主攻方向、发展目标、主要路径等，研究提出集团“十五五”规划编制指引。`,
        content3: `1.各子公司初步明晰本企业“十五五”发展思路
2.集团初步明确“十五五”发展思路`,
        content4: ``,
        content5: `根据XXX要求，我部门开展专题活动，对XX进行多方讨论......`
      },
      tableData: [{ name: '1.集团“十五五”发展初步思路', date: '2025-03-05' }],
      tableData2: [
        { name: '1.集团“十五五”发展初步思路', date: '2025-03-05' },
        { name: '2.集团“十五五”规划总体框架', date: '2025-06-05' }
      ],
      historyData: [
        {
          date: '2025-01-01',
          point: '10%',
          isend: '否',
          content5: `根据XXX要求，我部门开展专题活动，对XX进行多方讨论......`
        }
      ],
      fileList: [
        {
          name: '2025-01-01-XXXXXXX进展.pdf',
          url: '/'
        }
      ]
    }
  },
  methods: {
    addTable() {
      this.tableData2.push({})
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
  position: relative;
}
.el-card {
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

#todo-col {
  padding: 0 20px 20px 0;
}
#Fill-col {
  padding: 10px 20px 0 0;
}
#todo-task {
  padding: 0 20px 20px 0;
}
#Fill-Echart {
  padding: 10px 20px 0 0;
}

.task-card {
  overflow: auto;
  height: 310px;
}
.task-div {
  padding-bottom: 15px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.red {
  background: lightyellow;
}
</style>
